const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HTMLInlineCSSWebpackPlugin = require('html-inline-css-webpack-plugin').default;
// const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');

// 动态设置entry和htmlwebpackplugin
const setMPA = () => {
  const entry = {};
  const htmlWebpackPlugins = [];
  const entryFiles = glob.sync(path.join(__dirname, './src/*/index-server.js'));
  Object.keys(entryFiles).map((index) => {
    const entryFile = entryFiles[index];

    const match = entryFile.match(/src\/(.*)\/index-server\.js/);
    const pageName = match && match[1];

    if (pageName) {
      entry[pageName] = entryFile;
      htmlWebpackPlugins.push(new HtmlWebpackPlugin({
        template: path.join(__dirname, `src/${pageName}/index.html`),
        filename: `${pageName}.html`,
        // 指定生成的html要使用哪些chunk
        // 要使用分包的chunk，需要额外指定
        // 顺序一般是基础库、公共业务、页面对应chunk
        chunks: ['vendors', 'commons', pageName],
        // css、js自动注入到html中
        inject: true,
        // minify: {
        //   html5: true,
        //   collapseWhitespace: true,
        //   preserveLineBreaks: false,
        //   minifyCSS: true,
        //   minifyJS: true,
        //   removeComments: false,
        // },
      }));
    }
  });

  return {
    entry,
    htmlWebpackPlugins,
  };
};

const { entry, htmlWebpackPlugins } = setMPA();

module.exports = {
  entry,
  // entry: {
  //   index: "./src/index/index.js",
  //   search: "./src/search/index.js",
  // },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]-server.js',
    libraryTarget: 'umd',
  },
  mode: 'none',
  module: {
    rules: [
      {
        test: /.js$/,
        use: [
          'babel-loader',
          // 'eslint-loader',
        ],
      },
      {
        test: /.css$/,
        use: [
          // style-loader 和 MiniCssExtractPlugin.loader功能互斥，不能同时使用
          // style-laoder是把css样式插入到head标签中，MiniCssExtractPlugin.loader是把css样式提取到单独的文件中
          // MiniCssExtractPlugin生成的css文件不会自动引入到js文件中，需要手动引入，可以用html-webpack-plugin插件自动引入
          // 'style-loader',
          {
            loader: 'style-loader',
            options: {
              // 样式插入到head标签顶部，bottom就是head的底部
              insertAt: 'bottom',
              // 将style标签合并成一个
              singleton: false,
            },
          },
          //   MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
      {
        test: /.less$/,
        use: [
          // 'style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                require('autoprefixer')({
                  browsers: ['last 6 version', '>1%', 'ios 4'],
                }),
              ],
            },
          },
          {
            loader: 'px2rem-loader',
            options: {
              // 1rem等于75px，比较适合750px的设计稿，10rem
              remUnit: 75,
              // px转换成rem的小数点后位数
              remPrecision: 8,
            },
          },
        ],
      },
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use: [
          // {
          //     loader: 'url-loader',
          //     options: {
          //         limit: 10240
          //     }
          // }
          {
            loader: 'file-loader',
            options: {
              name: '[name]_[hash:8].[ext]',
            },
          },
        ],
        // use: 'file-loader'
      },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/,
        // use: 'file-loader'
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name]_[hash:8].[ext]',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name]_[contenthash:8].css',
    }),
    new OptimizeCSSAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano'),
    }),
    ...htmlWebpackPlugins,
    // new HtmlWebpackPlugin({
    //   template: path.join(__dirname, "src/index/index.html"),
    //   filename: "index.html",
    //   // 指定生成的html要使用哪些chunk
    //   chunks: ["index"],
    //   // css、js自动注入到html中
    //   inject: true,
    //   minify: {
    //     html5: true,
    //     collapseWhitespace: true,
    //     preserveLineBreaks: false,
    //     minifyCSS: true,
    //     minifyJS: true,
    //     removeComments: false,
    //   },
    // }),
    // new HtmlWebpackPlugin({
    //   template: path.join(__dirname, "src/search/index.html"),
    //   filename: "search.html",
    //   // 指定生成的html要使用哪些chunk
    //   chunks: ["search"],
    //   // css、js自动注入到html中
    //   inject: true,
    // //   minify: {
    // //     html5: true,
    // //     collapseWhitespace: true,
    // //     preserveLineBreaks: false,
    // //     minifyCSS: true,
    // //     minifyJS: true,
    // //     removeComments: false,
    // //   },
    // }),
    new HTMLInlineCSSWebpackPlugin(),
    new CleanWebpackPlugin(),
    // 通过CDN方式引入react和react-dom基础包，不打入bundle中
    // new HtmlWebpackExternalsPlugin({
    //   externals: [
    //     {
    //       // 指定要引入的模块名称，和 import ... from "xxx" 中的 xxx 对应
    //       module: "react",
    //       // 模块的加载地址
    //       entry: "https://unpkg.com/react@16/umd/react.development.js",
    //       // 指定模块在全局作用域中的变量名
    //       global: "React",
    //     },
    //     {
    //       module: "react-dom",
    //       entry: "https://unpkg.com/react-dom@16/umd/react-dom.development.js",
    //       global: "ReactDOM",
    //     }
    //   ]
    // })
  ],
  // optimization: {
  //   splitChunks: {
  //     // 最小体积，包大小大于minSize才会提取出来，单位是Bytes字节
  //     minSize: 0,
  //     cacheGroups: {
  //       // 提取基础包
  //       vendors: {
  //         test: /(react|react-dom)/,
  //         // test: /[\\/]node_modules[\\/](react|react-dom)/,
  //         // 如果要使用，需要把name对应的属性添加到htmlWebpackPlugin的chunk参数数组里
  //         name: 'vendors',
  //         chunks: 'all',
  //       },
  //       // 提取公共业务模块
  //       commons: {
  //         name: 'commons',
  //         chunks: 'all',
  //         // 至少引用2次才提取
  //         minChunks: 2,
  //       },
  //     },
  //   },
  // },
  // devtool: 'inline-source-map'
};
